<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head> 
	<title>Videshop Online</title> 
	<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<f:view>
		<table border="0" cellpadding="0" cellspacing="10">
			<tr>
				<td colspan="2"><h1>Videoshop Online</h1></td>
			</tr>
			<tr>
				<td valign="top">
					<table border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td>
								<!-- User section -->
								<f:subview id="userSection">
									<jsp:include page="user.jsp"/>
								</f:subview>
							</td>
						</tr>
						<tr>
							<td>
								<!-- Category section -->
								<f:subview id="categorySection">
									<jsp:include page="category.jsp"/>
								</f:subview>
							</td>
						</tr>
					</table>
				</td>
				<td valign="top" class="mainSection">
					<h2>Search</h2>
					<h:form id="searchForm">
						<h:panelGrid columns="2">
							<h:outputText styleClass="label" value="Name"/>
							<h:inputText styleClass="text200" value="#{searchSection.searchCriteria.titleName}"/>
							<h:outputText styleClass="label" value="Category"/>
							<h:selectOneListbox	styleClass="select200" size="1" value="#{searchSection.searchCriteria.categoryId}">
								<f:selectItems value="#{searchSection.categories}"/>
							</h:selectOneListbox>
							<h:outputText styleClass="label" value="Classification"/>
							<h:selectOneListbox styleClass="select100" size="1" value="#{searchSection.searchCriteria.classification}">
								<f:selectItems value="#{searchSection.classifications}"/>
							</h:selectOneListbox>
						</h:panelGrid>
						<h:commandLink styleClass="button" action="#{searchSection.search}">
							<f:verbatim escape="true">Search</f:verbatim>
						</h:commandLink>
					</h:form>
					
					<c:if test="${!empty searchSection.searchResults}">
						<h:form id="searchResultForm">
							<h:dataTable 	id="searchResultTable"
											border="0" cellspacing="0" cellpadding="3"
											styleClass="dataTable"
											columnClasses="titleTableImageColumn,titleTableYearColumn,titleTableTitleColumn,titleTableClassificationColumn,titleTableDescColumn"
											value="#{searchSection.searchResults}"
											var="title"
							>
								<h:column headerClass="titleTableImageColumn">
									<f:facet name="header">
									</f:facet>
									<h:graphicImage url="#{title.iconUrl}"/>
								</h:column>
								<h:column headerClass="titleTableYearColumn">
									<f:facet name="header">
										<h:commandLink action="#{titleSection.sortByYear}">
											<f:verbatim escape="true">Year</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{title.year}"/>
								</h:column>
								<h:column headerClass="titleTableTitleColumn">
									<f:facet name="header">
										<h:commandLink action="#{titleSection.sortByTitle}">
											<f:verbatim escape="true">Title</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{title.titleName}"/>
								</h:column>
								<h:column headerClass="titleTableClassificationColumn">
									<f:facet name="header">
										<h:commandLink action="#{titleSection.sortByClassification}">
											<f:verbatim escape="true">Classification</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:graphicImage url="#{title.classification.iconUrl}" height="45"/>
								</h:column>
								<h:column headerClass="titleTableDescColumn">
									<f:facet name="header">
										<f:verbatim escape="true">Description</f:verbatim>
									</f:facet>
									<h:outputText value="#{title.shortDescription}"/>
									...
									<h:commandLink styleClass="moreButton" action="#{searchSection.details}">
										<f:verbatim escape="true">More</f:verbatim>
									</h:commandLink>
								</h:column>
							</h:dataTable>
						</h:form>
					</c:if>
				</td>
			</tr>
		</table>
	</f:view>
</html>